<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>我的订单</title>
	<link rel="stylesheet" type="text/css" href="../css/style2.css">
	<style type="text/css">ul{list-style:none} a {text-decoration: none}</style>
</head>
<body>
	<div class="nav_bg">
    <div class="wrap"> 
        <ul id="nav" class="nav clearfix">
            <li class="nLi" style="font-size: 30px;">
                <h3 class="e"><a  href="#" style="font-size: 23px;">中工书城</a></h3>
            </li>
            <li class="nLi">
              <h3 class="d"><a  href="index.html">首页</a></h3>
            </li>
            <li class="nLi">
              <h3 class="d"><a href="myorder.html">我的订单</a></h3>
            </li>
            <li class="nLi ">
              <h3 class="d"><a href="order-statistic.html">订单统计</a></h3>
            </li>
        </ul>
    </div>
   </div>

   <div class="myorder">
     <h1 class="m" style="color: #ff7575">我的订单</h1>
   </div>

   <div class="order" style="display: none;">
       <ul >
           <li id="数学建模方法" class="orderli">
               <img src="../images/sxjmff.jpg" width="150" height="110" />
               <span class="food">数学建模方法</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：崔浩；出版社：人民出版社</span>
               <span class="price">18元</span>
               <button class="del">删除</button>
           </li>
           <li id="高等数学下册">
               <img src="../images/gdsxxc.jpg" width="150" height="110" />
               <span class="food">高等数学下册</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：刘芳；出版社：山东大学出版社</span>
               <span class="price">10元</span>
               <button class="del">删除</button>
           </li>
           <li id="高等数学上册">
               <img src="../images/gdsxsc.jpg" width="150" height="110" />
               <span class="food">高等数学上册</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：刘芳；出版社：山东大学出版社</span>
               <span class="price">9元</span>
               <button class="del">删除</button>
           </li>
           <li id="C语言">
               <img src="../images/cyuyan.jpg" width="150" height="110" />
               <span class="food">C语言</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：张三；出版社：北京大学出版社</span>
               <span class="price">14元</span>
               <button class="del">删除</button>
           </li>
           <li id="Java">
               <img src="../images/java.jpg" width="150" height="110" />
               <span class="food">Java</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：李四；出版社：清华大学出版社</span>
               <span class="price">88元</span>
               <button class="del">删除</button>
           </li>
           <li id="数据结构">
               <img src="../images/sjjg.jpg" width="150" height="110" />
               <span class="food">数据结构</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：王五；出版社：北京大学出版社</span>
               <span class="price">15元</span>
               <button class="del">删除</button>
           </li>
           <li id="计算机网络">
               <img src="../images/jsjwl.jpg" width="150" height="110" />
               <span class="food">计算机网络</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：赵磊；出版社：北京大学出版社</span>
               <span class="price">18元</span>
               <button class="del">删除</button>
           </li>
           <li id="计算机组成原理">
               <img src="../images/jsjzcyl.png" width="150" height="110" />
               <span class="food">计算机组成原理</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：李浩；出版社：清华大学出版社</span>
               <span class="price">11元</span>
               <button class="del">删除</button>
           </li>
           <li id="马克思主义基本原理">
               <img src="../images/mkszyjbyl.jpg" width="150" height="110" />
               <span class="food">马克思主义基本原理</span>
               <span class="num">数量：1</span>
               <span class="disc">作者：王二；出版社：山东大学出版社</span>
               <span class="price">13元</span>
               <button class="del">删除</button>
           </li>
       </ul>
   </div>

  <div class="order_content" id="first">

   </div>
   <div class="b_add">
       <a href="index.html"><button class="add">添加图书</button></a>
   </div>
   <section class="my_model">
    <p class="title">删除图书<span class="closeModel">X</span></p>
    <p>您确认要删除该图书吗？</p>
    <div class="opBtn">
        <a href="javascript:;" class="dialog-sure">确定</a>
        <a href="javascript:;" class="dialog-close">关闭</a>
    </div>
   </section>  

   <script type="text/javascript" src="../js/jQuery.js"></script>
   <script type="text/javascript" src="../js/jquery.dialog.js"></script>
   
   <script type="text/javascript">
     var db = openDatabase('dishes', '1.0', '图书数据库', 30*1024*1024);
     var datatable = document.getElementById("first");
     var dishnames=new Array();

     showAllData(datatable);
     function showData(row,datatable,i) {
        console.log(dishnames.indexOf(row.dishname));
    if(dishnames.indexOf(row.dishname)!=-1)
   {

       console.log("repeated");
   }
    else{ dishnames.push(row.dishname)
   
    var ul=document.createElement("ul");
    ul.className="order_lists";
    var li1 = document.getElementById(row.dishname.replace(/(^\s+)|(\s+$)/g,""));
    ul.appendChild(li1);
    datatable.appendChild(ul);
    console.log(datatable)
    }
    }
    function showAllData(datatable) {
    db.transaction(function(tx) {
        tx.executeSql("CREATE TABLE IF NOT EXISTS Dingdan6(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []);
        tx.executeSql("SELECT * FROM Dingdan6  ", [], function(tx, rs) {
            
            for(var i = 0; i < rs.rows.length; i++) {
                showData(rs.rows.item(i),datatable,i)
            }
        })
    })
    }

    var $order_lists = null;
    var $order_content = '';
    var namer;
    
    $('.del').click(function () {
        $order_lists = $(this).parents('.order_lists');
        $order_content = $order_lists.parents('.order_content');
        namer= $(this).parents('.order_lists').find('.food').html();
       // name=namer.split(">")[1].split("<")[0]
        console.log(name.length)
        
        $('.model_bg').fadeIn(300);
        $('.my_model').fadeIn(300);
    });
   

    //关闭模态框
    $('.closeModel').click(function () {
        closeM();
    });
    $('.dialog-close').click(function () {
        closeM();
    });
    function closeM() {
        $('.model_bg').fadeOut(300);
        $('.my_model').fadeOut(300);
    }
    //确定按钮，移除商品
    $('.dialog-sure').click(function () {
        $order_lists.remove();
        if($order_content.html().trim() == null || $order_content.html().trim().length == 0){
            //$.order_content.parents('.cartBox').remove();
            $.sendMsg('订单里空空如也!', 1000, function() {
                console.log('sendMsg closed');
            });
        }
        closeM();
        //$sonCheckBox = $('.son_check');
        //totalMoney();
        var db = openDatabase('dishes', '1.0', '图书数据库', 30*1024*1024);
        Deletedish();
        
        function Deletedish(datatable) {
            db.transaction(function(tx) {
                tx.executeSql("CREATE TABLE IF NOT EXISTS Dingdan6(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []);
                tx.executeSql("DELETE FROM Dingdan6 WHERE dishname=(?)", [namer], function(tx, rs) {
                    
                   console.log("delete success!")
                })
            })
        }
    })
   </script>
</body>
</html>